function showUser(){
    let userNaw = JSON.parse(localStorage.getItem('userNaw'))||{}
    // console.log(userNaw[0].username);
    if(userNaw.username){
        $('.outName').html(`用户名：<a href="#">${userNaw.username}</a>|
        <a href="http://127.0.0.1:5555/%E7%86%8A%E7%8C%AB%E4%BC%98%E9%80%89/src/pages/index.html" class='break'>注销</a>`)
    }else{
        $('.outName').html(`<a href="http://127.0.0.1:5555/%E7%86%8A%E7%8C%AB%E4%BC%98%E9%80%89/src/pages/loading.html">登录|注册</a>`)
    }
    $('.break').on('click',function(){
        localStorage.removeItem('userNaw')
    })
}
showUser()
//获取产品id
function getProductId() {
    let url = location.href
    let params = url.substring(url.indexOf('?') + 1)
    let arr = params.split('=')
    let id = arr[1]
    return id
}

function product() {
    let id = getProductId()
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/detail',
        type: 'get',
        data: {
            id,
        },
        success: function (res) {
            showProductDetail(res.data)
            showProductlist(res.data.detail.descContentList)
            nowPro.name = res.data.share.title
            nowPro.price = res.data.detail.originPrice
            nowPro.url = res.data.detail.photo[0].url
            nowPro.id= res.data.shop.shopId
            nowPro.singlePrice=res.data.detail.originPrice

        },
        error: function (error) {
            console.log(error);
        }
    })
}
product()
// 详情展示
function showProductlist(result) {
    let picStr = ''
    for (let i = 0; i < result.length; i++) {
        picStr += `
                <img src='${result[i].image.url}'>
                `
    }
    $('.showProduct').html(picStr)
}
//商品详情
function showProductDetail(data) {
    let str = `
            <div class="g-left">
            <div class="m-show">
                <img src="${data.detail.photo[0].url}" alt="">
                <div class="mask"></div>
            </div>
            <ul class="m-choose">
                <li><img src="${data.detail.photo[0].url}" width="80px" alt="1" onclick='move()'></li>
                <li><img src="${data.detail.photo[1].url}" width="80px" alt="2" onclick='move()'></li>
                <li><img src="${data.detail.photo[2].url}" width="80px" alt="3" onclick='move()'></li>
                <li><img src="${data.detail.photo[3].url}" width="80px" alt="4" onclick='move()'></li>
            </ul>
        </div>

        <div class="g-right">
            <h2>${data.share.title}</h2>
            <p class='text'>${data.share.text}</p>
            <p class='price'>￥${data.detail.originPrice}</p>
            <button class="settlement" onclick="jump()">查看购物车</button>
            <button class="up" onclick="checkArr()">加入购物车</button>
        </div>
        <div class="big-show">
                <img src="${data.detail.photo[0].url}" alt="">
        </div>
    `
    $('.wraper').html(str)
    bigShow()
}

//点击图片跳转首页
function turn() {
    location.href = `http://127.0.0.1:5555/%E7%86%8A%E7%8C%AB%E4%BC%98%E9%80%89/src/pages/index.html`
}

function move(e) {
    e = e || window.event
    let target = e.target || e.srcElement
    $('.m-show>img').prop('src', `${$(target).prop('src')}`)
    $('.big-show>img').prop('src', `${$(target).prop('src')}`)
}

function bigShow() {
    $('.m-show').on('mouseover', function () {
        $('.big-show').css('display', 'block')
        $('.mask').css('display', 'block')
    })
    $('.m-show').on('mouseout', function () {
        $('.big-show').css('display', 'none')
        $('.mask').css('display', 'none')
    })
    $('.m-show').on('mousemove', function (e) {
        e = e || window.event
        // imgH()
        let w = parseInt($('.m-show').css('width')) * parseInt($('.big-show').css('width')) / parseInt($('.mask').css('width'))
        let h = parseInt($('.m-show').css('height')) * parseInt($('.big-show').css('height')) / parseInt($('.mask').css('height'))
        $('.big-show>img').css('width', w)
        $('.big-show>img').css('height', h)
        // console.log(w,h);
        let x = e.offsetX - parseInt($('.mask').css('width')) / 2
        let y = e.offsetY - parseInt($('.mask').css('height')) / 2
        if (x < 0) x = 0
        if (y < 0) y = 0
        if (x > parseInt($('.m-show').css('width')) - parseInt($('.mask').css('width'))) {
            x = parseInt($('.m-show').css('width')) - parseInt($('.mask').css('width'))
        }
        if (y > parseInt($('.m-show').css('height')) - parseInt($('.mask').css('height'))) {
            y = parseInt($('.m-show').css('height')) - parseInt($('.mask').css('height'))
        }
        $('.mask').css('top', y)
        $('.mask').css('left', x)
        //图片移动距离=遮罩层移动距离*（盒子显示大小/遮罩层大小）
        let m = x * (parseInt($('.big-show').css('width')) / parseInt($('.mask').css('width')))
        let n = y * (parseInt($('.big-show').css('height')) / parseInt($('.mask').css('height')))
        $('.big-show>img').css('top', -n)
        $('.big-show>img').css('left', -m)
        // console.log($('.mask').css('height'));
    })
}
//加入购物车
let nowPro = {}
//判定数据中是否有商品
function checkArr(){
    let cartArray = JSON.parse(localStorage.getItem('cart')) || []
    console.log(cartArray);
    let oldProduct = cartArray.find(item=>item.name==nowPro.name) 
    if(oldProduct){
        oldProduct.num++
    }else{
        let newProduct = {
            ...nowPro,
            num:1,
            state:false
        }
        cartArray.push(newProduct)
    }

    localStorage.setItem('cart',JSON.stringify(cartArray))
    
    alert('加入购物车成功!')
    
}
//跳转购物车
function jump(){
    location.href='http://127.0.0.1:5555/%E7%86%8A%E7%8C%AB%E4%BC%98%E9%80%89/src/pages/shoppingCart.html'
}
function back(){
    $('.back').on('click',function(){
        var timer = setInterval(function () {
            document.documentElement.scrollTop=document.documentElement.scrollTop-40
            if(document.documentElement.scrollTop<=0){
                clearInterval(timer)
            }
            },10)
    })
}
back()